<template>
<div class="wrapper">
    <div v-if="web" class="header">
        <text class="header-text">上海卓顾信息科技有限公司</text>
        <div class="back-area" @click="back">
            <image class="back" :src="getUrl('image/back.png')"/>
        </div>
    </div>

    
    <scroller class="main" v-if="chartOrform" :show-scrollbar="false">
        <div class="chart">
            <web style="width: 750px; height: 600px" :src="getUrl('chart/chart_income.html')"></web>
        </div>
        <div class='income_items' v-for="(item,i) in list" :key="i">
            <image class='in_img' :src="getUrl('image/income_'+(i+1)+'.png')"/>
            <text class="text">{{item.text}}</text>
            <text class="money">{{item.money}}</text>
            <image class='in_enter' :src="getUrl('image/enter.png')"/>
        </div>
    </scroller>

    <scroller class="main" v-if="!chartOrform" :show-scrollbar="false">
        <div class='title'>
            <text class="titleText">利润表</text>
            <text class='button'>下载</text>
        </div>
        <div class='group' v-for="item in profitList" :key='item.id'>
            <div class='item item-h1' v-if="item.row===null">
                <text class="item-h1-text">{{item.item}}</text>
            </div>
            <div class='item item-title' v-if="item.row!==null">
                <div class="row rownum">{{item.row==null?'':item.row}}：</div>
                <text class="num">{{item.item}}</text>
            </div>
            <div class='item' v-if="item.row!==null">
                <div class="row">本年累计金额：</div> 
                <text :class="['num','rightBold',item.yearCash < 0 ? 'red' : '']">{{item.yearCash}}</text>
            </div>
            <div class='item' v-if="item.row!==null"> 
                <div class="row">本月金额：</div>
                <text :class="['num','rightBold',item.monthCash < 0 ? 'red' : '']">{{item.monthCash}}</text>
            </div>
        </div>
    </scroller>

    <div class='fixed_button' @click="swich">
        <image v-if="chartOrform" class='fixed_img' :src="getUrl('image/form.png')"/>
        <image v-else class='fixed_img' :src="getUrl('image/chart.png')"/>
        <text class='fixed_text'>{{fixedText}}</text>
    </div>
</div>
</template>

<script>
export default {
    data () {
        return {
            web: false,
            list:[
                {text:'收入',money:'165,000.00'},
                {text:'成本',money:'145,000.00'},
                {text:'费用',money:'65,000.00'},
                {text:'税金及附加',money:'25,000.00'},
                {text:'净利润',money:'5,000.00'}
            ],
            chartOrform:true,
            fixedText:'列表',
            profitList: [{
                "item": "一、营业收入",
                "row": "1",
                "yearCash": "165165",
                "monthCash": "5959",
                "lastYearMonthCash": "0",
                "fomularDetail": "科目：主营业务收入+其他业务收入",
                }, {
                "item": "减：营业成本",
                "row": "2",
                "yearCash": "2652",
                "monthCash": "626",
                "lastYearMonthCash": "0",
                "fomularDetail": "科目：主营业务成本+其他业务成本",
                }, {
                "item": "营业税金及附加",
                "row": "3",
                "yearCash": "-2626",
                "monthCash": "15",
                "lastYearMonthCash": "0",
                "fomularDetail": "科目：营业税金及附加",
                "open": "1",
                "closeNum": "10",
                "openStatus": true
                }, {
                "item": "　其中：消费税",
                "row": "4",
                "yearCash": "651476",
                "monthCash": "-26969",
                "lastYearMonthCash": "0",
                "fomularDetail": "科目：应交消费税",
                }, {
                "item": "　　　营业税",
                "row": "5",
                "yearCash": "-6621",
                "monthCash": "-445",
                "lastYearMonthCash": "0",
                "fomularDetail": "科目：应交营业税",
                }, {
                "item": "　　　城市维护建设税",
                "row": "6",
                "yearCash": "0",
                "monthCash": "0",
                "lastYearMonthCash": "0",
                "fomularDetail": "科目：应交城市维护建设税",
                }, {
                "item": "　　　资源税",
                "row": "7",
                "yearCash": "0",
                "monthCash": "0",
                "lastYearMonthCash": "0",
                "fomularDetail": "科目：应交资源税",
                }, {
                "item": "　　　土地增值税",
                "row": "8",
                "yearCash": "0",
                "monthCash": "0",
                "lastYearMonthCash": "0",
                "fomularDetail": "科目：应交土地增值税",
                }, {
                "item": "　　　城镇土地使用税、房产税、车船税、印花税",
                "row": "9",
                "yearCash": "0",
                "monthCash": "0",
                "lastYearMonthCash": "0",
                "fomularDetail": "科目：应交城镇土地使用税+应交房产税+应交车船使用税",
                }, {
                "item": "　　　教育费附加、矿产资源补偿费、排污费",
                "row": "10",
                "yearCash": "0",
                "monthCash": "0",
                "lastYearMonthCash": "0",
                "fomularDetail": "科目：地方教育费附加+教育费附加+矿产资源补偿费+排污费",
                }, {
                "item": "销售费用",
                "row": "11",
                "yearCash": "0",
                "monthCash": "0",
                "lastYearMonthCash": "0",
                "fomularDetail": "科目：销售费用",
                "open": "1",
                "closeNum": "13",
                "openStatus": true
                }, {
                "item": "　其中：商品维修费",
                "row": "12",
                "yearCash": "0",
                "monthCash": "0",
                "lastYearMonthCash": "0",
                "fomularDetail": "科目：商品维修费",
                }, {
                "item": "　　　广告费和业务宣传费",
                "row": "13",
                "yearCash": "0",
                "monthCash": "0",
                "lastYearMonthCash": "0",
                "fomularDetail": "科目：广告费+业务宣传费",
                }, {
                "item": "管理费用",
                "row": "14",
                "yearCash": "0",
                "monthCash": "0",
                "lastYearMonthCash": "0",
                "fomularDetail": "科目：管理费用",
                "open": "1",
                "closeNum": "17",
                "openStatus": true
                }, {
                "item": "　其中：开办费",
                "row": "15",
                "yearCash": "0",
                "monthCash": "0",
                "lastYearMonthCash": "0",
                "fomularDetail": "科目：开办费",
                }, {
                "item": "　　　业务招待费",
                "row": "16",
                "yearCash": "0",
                "monthCash": "0",
                "lastYearMonthCash": "0",
                "fomularDetail": "科目：业务招待费",
                }, {
                "item": "　　　研究费用",
                "row": "17",
                "yearCash": "0",
                "monthCash": "0",
                "lastYearMonthCash": "0",
                "fomularDetail": "科目：研究费用",
                }, {
                "item": "财务费用",
                "row": "18",
                "yearCash": "0",
                "monthCash": "0",
                "lastYearMonthCash": "0",
                "fomularDetail": "科目：财务费用",
                "open": "1",
                "closeNum": "19",
                "openStatus": true
                }, {
                "item": "　其中：利息费用（收入以“-”号填列）",
                "row": "19",
                "yearCash": "0",
                "monthCash": "0",
                "lastYearMonthCash": "0",
                "fomularDetail": "科目：利息费用",
                }, {
                "item": "加：投资收益（损失以“-”号填列）",
                "row": "20",
                "yearCash": "0",
                "monthCash": "0",
                "lastYearMonthCash": "0",
                "fomularDetail": "科目：投资收益",
                }, {
                "item": "二、营业利润（亏损以“-”号填列）",
                "row": "21",
                "yearCash": "0",
                "monthCash": "0",
                "lastYearMonthCash": "0",
                "fomularDetail": "行次：行1-行2-行3-行11-行14-行18+行20",
                }, {
                "item": "加：营业外收入",
                "row": "22",
                "yearCash": "0",
                "monthCash": "0",
                "lastYearMonthCash": "0",
                "fomularDetail": "科目：营业外收入",
                "open": "1",
                "closeNum": "23",
                "openStatus": true
                }, {
                "item": "　其中：政府补助",
                "row": "23",
                "yearCash": "0",
                "monthCash": "0",
                "lastYearMonthCash": "0",
                "fomularDetail": "科目：政府补助",
                }, {
                "item": "减：营业外支出",
                "row": "24",
                "yearCash": "0",
                "monthCash": "0",
                "lastYearMonthCash": "0",
                "fomularDetail": "科目：营业外支出",
                "open": "1",
                "closeNum": "29",
                "openStatus": true
                }, {
                "item": "　其中：坏账损失",
                "row": "25",
                "yearCash": "0",
                "monthCash": "0",
                "lastYearMonthCash": "0",
                "fomularDetail": "科目：坏账损失",
                }, {
                "item": "　　　无法收回的长期债券投资损失",
                "row": "26",
                "yearCash": "0",
                "monthCash": "0",
                "lastYearMonthCash": "0",
                "fomularDetail": "科目：无法收回的长期债券投资损失",
                }, {
                "item": "　　　无法收回的长期股权投资损失",
                "row": "27",
                "yearCash": "0",
                "monthCash": "0",
                "lastYearMonthCash": "0",
                "fomularDetail": "科目：无法收回的长期股权投资损失",
                }, {
                "item": "　　　自然灾害等不可抗力因素造成的损失",
                "row": "28",
                "yearCash": "0",
                "monthCash": "0",
                "lastYearMonthCash": "0",
                "fomularDetail": "科目：自然灾害等不可抗力因素造成的损失",
                }, {
                "item": "　　　税收滞纳金",
                "row": "29",
                "yearCash": "0",
                "monthCash": "0",
                "lastYearMonthCash": "0",
                "fomularDetail": "科目：税收滞纳金",
                }, {
                "item": "三、利润总额（亏损总额以“-”号填列）",
                "row": "30",
                "yearCash": "0",
                "monthCash": "0",
                "lastYearMonthCash": "0",
                "fomularDetail": "行次：行21+行22-行24",
                }, {
                "item": "减：所得税费用",
                "row": "31",
                "yearCash": "0",
                "monthCash": "0",
                "lastYearMonthCash": "0",
                "fomularDetail": "科目：所得税费用",
                }, {
                "item": "四、净利润（净亏损以“-”号填列）",
                "row": "32",
                "yearCash": "0",
                "monthCash": "0",
                "lastYearMonthCash": "0",
                "fomularDetail": "行次：行30-行31",
            }]
        }
    },
    created(){
        let platform = weex.config.env.platform;
        this.web = platform.toLowerCase()!=='web'?false:true;
    },
    methods:{
        getUrl(param){
            let bundleUrl = weex.config.bundleUrl; 
            bundleUrl = new String(bundleUrl); 
            let platform = weex.config.env.platform;
            var nativeBase;  
            var native;   

            nativeBase = bundleUrl.substring(0, bundleUrl.lastIndexOf('/') + 1)
            native = nativeBase.replace('components/','') + 'assets/' + param;
            
            return native;  
        },
        back(){
            var navigator = weex.requireModule('navigator')
            navigator.pop()
        },
        swich(){
            if (this.chartOrform){
                this.chartOrform = false;
                this.fixedText = '图表'
            }else{
                this.chartOrform = true;
                this.fixedText = '列表'
            }
        }
    }
    
}
</script>

<style scoped>
.wrapper{
    background-color: #f5f5f5;
}
.header{
    height: 90px;
    width: 750px;
    background-color: #ffffff;
}
.header-text{
    height: 90px;
    line-height: 90px;
    text-align: center;
}
.back-area{
    width: 50px;
    height: 50px;
    position: absolute;
    left: 20px;
    top: 20px;
    align-items: center;
    justify-content: center;
}
.back{
    width: 30px;
    height: 30px;
}



.main{
    flex: 1;
}
.chart{
    height: 600px;
    width: 750px;
}
.income_items{
  height: 120px;
  background-color: #ffffff;
  border-bottom-width: 2px ;
  border-bottom-color:#f7f7f7;
  flex-direction: row;
  align-items: center;
}
.in_img{
  width: 80px;
  height: 80px;
  margin-left: 20px;
  margin-right: 20px;
}
.text{
  width: 200px;
  font-size:32px;
}
.money{
  flex: 1;
    font-size:30px;
  font-weight:bold;
  text-align: right;
  margin-right: 10px;
}
.in_enter{
  width: 50px;
  height: 50px;
  margin-right: 20px;
}

.fixed_button{
  position: fixed;
  right: 0;
  top: 850px;
  width: 110px;
  height: 90px;
  background-color: #42c5e1;
  border-bottom-left-radius: 45px;
  border-top-left-radius: 45px;
}
.fixed_img{
  width: 50px;
  height: 50px;
  border-radius:25px;
  position: absolute;
  left: 16px;
  top: 20px; 
}
.fixed_text{
  position: absolute;
  right: 15px;
  width: 20px;
  height: 90px;
  font-size: 20px;
  line-height: 25px;
  padding-top: 20px;
  color: #ffffff;
}

.title{
  height:70px;
  background-color: #ffffff;
}
.titleText{
    flex: 1;
    height:70px;
    text-align:center;
    font-size:34px;
    line-height:70px;
    font-weight: bold;
}
.button{
  position: absolute;
  right: 20px;
  top: 8px;
  text-align:center;
  width: 100px;
  height: 54px;
  line-height:54px;
  font-size:28px;
  border-radius: 5px;
  background-color: #94cf28;
  color: #ffffff;
}

.group{
  border-top-width: 2px;
  border-top-color: #dddddd; 
  margin-bottom: 20px;
}

.item{
  height: 70px;
  border-bottom-width: 2px;
  border-bottom-color: #dddddd; 
  background-color: #ffffff;
  flex-direction: row;
  align-items: center;
}
.item-h1{
  background-color: #3ac7d9;
}
.item-h1-text{
    color: #ffffff;
    padding-left: 20px;
    font-size: 26px;
    font-weight: bold;
}
.item-title{
  background-color: #defcfe;
}
.row{
    width: 300px;
    padding-left:20px; 
    color: #5c5c5c;
    font-size: 26px;
}
.rownum{
    width: 80px;
}
.num{
    flex: 1;
    text-align: right;
    color: #5c5c5c;
    font-size: 26px;
    padding-right:20px; 
}
.rightBold{
    font-weight: bold;
}
.red{
  color: #FF0000;
}
</style>
